<template>
  <div class="dashboard-container">
    <!-- 基础题库管理 -->
    <el-card>
      <el-row>
        <el-button size="mini" @click="showEdit">新增试题</el-button>
        <el-button size="mini" @click="dialogVisibleBatch = true">批量导入</el-button>
      </el-row>
      <!-- 提交的大表单 -->
      <el-form ref="postFormRef" :model="searchForm">
        <el-col :span="4">
          <el-form-item label="学科">
            <el-select v-model="searchForm.subjectID" placeholder="请选择" prop="sub1">
              <el-option v-for="item in subjectOptions" :key="item.id" :label="item.label" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 难易程度  -->
        <el-col :span="4">
          <el-form-item label="难度">
            <el-select v-model="searchForm.difficulty" placeholder="请选择" prop="sub1">
              <el-option v-for="item in difficulty" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 试题类型  -->
        <el-col :span="5">
          <el-form-item label="试题类型">
            <el-select v-model="searchForm.questionType" placeholder="请选择" prop="sub2">
              <el-option v-for="item in questionType" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 标签 -->
        <el-col :span="4">
          <el-form-item label="标签">
            <el-select v-model="searchForm.tags" placeholder="请选择" prop="sub3">
              <el-option v-for="item in tagOptions" :key="item.id" :label="item.tagName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 城市 -->
        <el-col :span="4">
          <el-form-item label="市区/县" prop="sub4">
            <el-select @change="cityData" v-model="searchForm.province" placeholder="请选择" style="width:95px">
              <el-option v-for="item in province" :key="item" :label="item" :value="item"></el-option>
            </el-select>
            <el-select v-model="searchForm.city" placeholder="请选择" style="width:95px">
              <el-option v-for="item in city" :key="item" :label="item" :value="item"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 关键字 -->
        <el-col :span="4">
          <el-form-item label="关键字" prop="sub5">
            <el-input v-model="searchForm.input" placeholder="请输入题目编号/题干" style="width:180px" clearable></el-input>
          </el-form-item>
        </el-col>
        <!-- 题目备注 -->
        <el-col :span="4">
          <el-form-item label="题目备注" prop="sub6">
            <el-input v-model="searchForm.input1" placeholder="请输入" style="width:180px" clearable></el-input>
          </el-form-item>
        </el-col>
        <!-- 企业简称 -->
        <!-- 题目备注 -->
        <el-col :span="4">
          <el-form-item label="企业简称" prop="sub7">
            <el-input v-model="searchForm.input2" placeholder="请输入" style="width:180px" clearable></el-input>
          </el-form-item>
        </el-col>
        <!-- 方向 -->
        <el-col :span="4">
          <el-form-item label="方向" prop="sub8">
            <el-select v-model="searchForm.direction" placeholder="请选择">
              <el-option v-for="item in direction" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 录入人 -->
        <el-col :span="6">
          <el-form-item label="录入人" prop="sub9">
            <el-select v-model="searchForm.users" placeholder="请选择">
              <el-option v-for="item in usersList" :key="item.id" :value="item.username"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 录入人 -->
        <el-col :span="6">
          <el-form-item label="二级题目" prop="sub10">
            <el-input v-model="searchForm.input3" placeholder="请输入二级目录" style="width:180px" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="15">
          <el-row>
            <el-button type="primary" size="small" style="float: right; margin-left: 15px;"     @click="rakeThrough"
            >搜索</el-button
            >
            <el-button size="small" style="float: right; margin-left: 15px;" @click="Empty">清除</el-button>
          </el-row>
        </el-col>
      </el-form>
      <!-- 表单数据 -->
      <el-table :data="questionsList" border stript>
        <el-table-column label="序号" prop="id" width="50"></el-table-column>
        <el-table-column label="试题编号" prop="number"></el-table-column>
        <el-table-column label="学科" prop="subjectID"></el-table-column>
        <el-table-column label="提型" prop="questionType"></el-table-column>
        <el-table-column label="题干" prop="question"></el-table-column>
        <el-table-column label="难度" prop="difficulty"></el-table-column>
        <el-table-column label="使用次数" width="50"></el-table-column>
        <el-table-column label="录入人" prop="creatorID" width="100px"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope" width="180px">
            <!-- 预览按钮 -->
            <el-tooltip content="预览" placement="top">
              <el-button type="success" icon="el-icon-more-outline" circle min @click="detailById(scope.row.id)"></el-button>
            </el-tooltip>
            <!-- 修改按钮 -->
            <el-tooltip content="修改" placement="top">
              <el-button type="primary" icon="el-icon-edit" circle min @click="showEdit(scope.row)"></el-button>
            </el-tooltip>
            <!-- 删除按钮 -->
            <el-tooltip content="删除" placement="top">
              <el-button type="danger" icon="el-icon-delete" circle min @click="showRemoveById(scope.row.id)"></el-button>
            </el-tooltip>
            <!-- 加入精品按钮 -->
            <el-tooltip content="加入精品" placement="top">
              <el-button
                type="warning"
                icon="el-icon-upload"
                circle
                min
                @click="choicePublish(scope.row.id, scope.row.publish)"
              >
                <template slot-scope="scope">
                  <i class="el-icon-upload" type="warning" v-if="scope.row.publish === '1'"></i>
                  <i class="el-icon-upload" type="info" v-else></i>
                </template>
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 预览弹出框 -->
      <el-dialog title="预览信息" :visible.sync="dialogVisibleDetail" width="50%">
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisibleDetail = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 批量导入 -->
      <el-dialog title="批量导入" :visible.sync="dialogVisibleBatch" width="30%">
        <el-form ref="postFormRef" :model="searchForm">
          <el-col>
            <el-form-item label="学科">
              <el-select v-model="searchForm.subjectID" placeholder="请选择">
                <el-option v-for="item in subjectOptions" :key="item.id" :label="item.label" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
        <!-- 文件上传 -->
        <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleBatch = false">取 消</el-button>
          <el-button type="primary" @click="batchImport">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list as subjectList } from '../../api/hmmm/subjects.js'
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
import { list as tagsList } from '@/api/hmmm/tags.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { list as users } from '@/api/base/users.js'
import { list as questionList } from '@/api/hmmm/questions.js'
import { update as showEditUpdate } from '@/api/hmmm/questions.js'
import { remove as showDialogRemove } from '@/api/hmmm/questions.js'
import { detail as showDetail } from '@/api/hmmm/questions.js'
import { choicePublish as choicePublishPut } from '@/api/hmmm/questions.js'
import { batch } from '@/api/hmmm/questions.js'
import { log } from 'util'

export default {
  data() {
    return {
      // 提交学科搜索表单数据
      searchForm: {
        subjectID: '',
        difficulty: '',
        questionType: '',
        tags: '',
        provinces: '',
        city: '',
        direction: '',
        users: '',
        input: '',
        input1: '',
        input2: '',
        input3: ''
      },
      // 遍历学科数组
      subjectOptions: [],
      // 难度
      difficulty,
      // 试题类型
      questionType,
      // 标签下拉
      tagOptions: [],
      // 城市
      province: provinces(),
      // 区
      city: [],
      // 方向
      direction,
      // 录入人
      usersList: [],
      // 数组列表
      questionsList: [],
      queryInfo: {
        // 默认第一页
        pagenum: 1,
        // 每页默认5条
        pagesize: 5
      },
      // 总的条数
      total: 0,
      showRemove: [],
      // 图片预览窗口
      dialogVisibleDetail: false,
      // 上架初始状态
      publish: 0,
      // 批量导入
      dialogVisibleBatch: false,
      // 批量导入
      batchImports: []
    }
  },
  methods: {
    // 获取数据
    async getsub() {
      const { data: res } = await subjectList()
      this.subjectOptions = res.items
      // console.log(res)
    },
    // 获取标签下拉列表
    async gettag() {
      const { data: res } = await tagsList()
      this.tagOptions = res.items
      // console.log(res)
    },
    // 获取城市数据
    // 城市接口已经写好了,只需要渲染到页面
    cityData(e) {
      this.city = citys(e)
    },
    // 获取录入人数据
    async getuser() {
      const res = await users()
      // this.users = res.items
      // console.log(res.data.list)
      this.usersList = res.data.list
    },
    // 数据列表接口
    async getQuestionsList() {
      const { data: res } = await questionList('/questions')
      this.questionsList = res.items
      this.total = res.counts
      // console.log(res)
    },
    // 首页默认显示
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getQuestionsList()
    },
    // 每页的条数
    handleCurrentChange(newNum) {
      this.queryInfo.pagenum = newNum
      this.getQuestionsList()
    },
    // 修改连接
    async showEdit(row) {
      console.log(row)
      // const {data :res} = await showEditUpdate(id)
      //  console.log(res)
      // this.showEdit = res.items

      this.$router.push('./new')
    },
    // 删除弹出框
    async showRemoveById(id) {
      // console.log(id)
      const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除!')
      }
      this.$message.success('删除成功!')
      const res = await showDialogRemove(id)
      // console.log(res)
      this.showRemove = res.data.items
      // 渲染数据列表
      this.getQuestionsList()
    },
    // 预览页面
    async detailById(id) {
      // console.log(id);
      // const {data:res} = await showDetail(id)
      //  this.detail= res.items
      //  console.log(res)

      this.dialogVisibleDetail = true
    },
    // 加入精品
    async choicePublish(id) {
      // console.log(id)
      const confirmResult = await this.$confirm('加入精品题库, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消加入精品题库!')
      }
      // const  {data:res}= await choicePublishPut(id,publish)
      this.$message.success('成功加入精品题库!')
      //   if(publish === 1){
      //       return type = warning
      //   }
      //   return type = danger
    },
    // 批量导入
    async batchImport(a) {
      console.log(a)
      const res = await batch(a)
      this.batchImports = res.data.items
      console.log(res)
      this.dialogVisibleBatch = false
    },
    // 一键清空
    Empty() {
      console.log(this.searchForm)
      this.$refs.postFormRef.resetFields()
      this.searchForm = {}
    },
    // 搜索按钮
    rakeThrough(users) {
      // 获取到题目备注表单的值
      console.log(users)
      // console.log(123);
    }
  },
  created() {
    // 将学科数据渲染到页面
    this.getsub()
    // 将标签数据渲染到页面
    this.gettag()
    // 将录入人的数据渲染到页面
    this.getuser()
    // 渲染数据列表
    this.getQuestionsList()
  }
}
</script>

<style scoped>
.el-form {
  margin-top: 10px;
}
</style>
